<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人博客</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <h1>我的博客</h1>
            </div>
            <nav class="nav">
                <button class="nav-toggle" aria-label="切换菜单">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <ul class="nav-menu">
                    <li><a href="#home">首页</a></li>
                    <li><a href="#articles">文章</a></li>
                    <li><a href="#about">关于我</a></li>
                    <li><a href="#contact">联系</a></li>
                </ul>
            </nav>
            <button class="theme-toggle" aria-label="切换主题">🌓</button>
        </div>
    </header>

    <main class="main container">
        <section class="hero" id="home">
            <div class="hero-content">
                <h2>欢迎来到我的博客</h2>
                <p>分享技术、生活和思考</p>
            </div>
        </section>

        <div class="content-wrapper">
            <section class="articles" id="articles">
                <h2 class="section-title">最新文章</h2>
                <div class="article-list">
                    <article class="article-card">
                        <div class="article-image">
                            <img src="https://picsum.photos/800/400?random=1" alt="文章图片">
                        </div>
                        <div class="article-content">
                            <h3><a href="#">前端开发的最佳实践</a></h3>
                            <p class="article-meta">发布于: 2023年10月15日 | 分类: 技术</p>
                            <p>探索现代前端开发中的最佳实践和工具，提高开发效率和代码质量...</p>
                            <a href="#" class="read-more">阅读更多</a>
                        </div>
                    </article>

                    <article class="article-card">
                        <div class="article-image">
                            <img src="https://picsum.photos/800/400?random=2" alt="文章图片">
                        </div>
                        <div class="article-content">
                            <h3><a href="#">响应式设计指南</a></h3>
                            <p class="article-meta">发布于: 2023年10月10日 | 分类: 设计</p>
                            <p>学习如何创建适应各种屏幕尺寸的网站，提供一致的用户体验...</p>
                            <a href="#" class="read-more">阅读更多</a>
                        </div>
                    </article>

                    <article class="article-card">
                        <div class="article-image">
                            <img src="https://picsum.photos/800/400?random=3" alt="文章图片">
                        </div>
                        <div class="article-content">
                            <h3><a href="#">JavaScript ES2023 新特性</a></h3>
                            <p class="article-meta">发布于: 2023年10月5日 | 分类: 编程</p>
                            <p>了解JavaScript最新版本中的新功能和语法改进，保持技术前沿...</p>
                            <a href="#" class="read-more">阅读更多</a>
                        </div>
                    </article>
                </div>
            </section>

            <aside class="sidebar">
                <div class="about-me" id="about">
                    <h3>关于我</h3>
                    <div class="author-image">
                        <img src="https://picsum.photos/200/200?random=4" alt="作者照片">
                    </div>
                    <p>热爱技术的全栈开发者，喜欢分享知识和经验。</p>
                    <div class="social-links">
                        <a href="#" aria-label="GitHub">GitHub</a>
                        <a href="#" aria-label="Twitter">Twitter</a>
                        <a href="#" aria-label="LinkedIn">LinkedIn</a>
                    </div>
                </div>

                <div class="categories">
                    <h3>分类</h3>
                    <ul>
                        <li><a href="#">技术 (15)</a></li>
                        <li><a href="#">设计 (8)</a></li>
                        <li><a href="#">编程 (12)</a></li>
                        <li><a href="#">生活 (6)</a></li>
                    </ul>
                </div>

                <div class="subscribe" id="contact">
                    <h3>订阅更新</h3>
                    <p>输入您的邮箱，获取最新文章通知</p>
                    <form class="subscribe-form">
                        <input type="email" placeholder="您的邮箱地址" required>
                        <button type="submit">订阅</button>
                    </form>
                </div>
            </aside>
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>